<script setup>
import useChannel from '@/store/channel'
import logo from '@/assets/image/logo.png'
import { handelMessageToString, transformTimeStamp } from '@/utils/dialog-utils'

const props = defineProps({
  data: Object,
})

const emit = defineEmits(['click'])
const { id, name, lastMessage, icon, pinnedFlag, dndFlag, lastMsgTime, createTime } = toRefs(props.data)
const channelStore = useChannel()

const channelLastMsgTime = computed(() => {
  return transformTimeStamp(lastMsgTime.value || createTime.value)
})

const unreadCount = computed(() => {
  const count = channelStore.countStatisticsMap.get(id.value)?.rootMsgCount || 0
  return count > 99 ? 99 : count
})

function dialogue(dialog) {
  emit('click', dialog)
}

const lastMsgStr = computed(() => {
  return handelMessageToString(lastMessage.value, { mode: 'html' })
})
</script>

<template>
  <div class="channel-card" :class="{ active: channelStore.channelId === id }" @click="dialogue(props.data)">
    <div class="channel-avatar">
      <el-avatar :src="icon || logo" :size="40" fit="contain"></el-avatar>
    </div>
    <div v-if="pinnedFlag === 1" class="group-type-icon"></div>
    <div class="channel-info">
      <div class="channel-title text-overflow-ellipsis">
        {{ name }}
        <!--<span v-if="type === 'chat'" class="status">{{ status }}</span>-->
      </div>
      <div v-if="dndFlag === 1" class="not-disturb">
        <SvgIcon name="not-disturb" size="12"></SvgIcon>
      </div>
      <div class="channel-message" v-html="lastMsgStr"></div>
    </div>
    <div class="channel-remark" v-cloak>
      <div>{{ channelLastMsgTime }}</div>
      <el-badge
        v-if="unreadCount > 0"
        :is-dot="dndFlag === 1"
        :hidden="!unreadCount > 0"
        :value="unreadCount"></el-badge>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.channel-card {
  @include use-flex(center);
  position: relative;
  cursor: pointer;
  padding: 10px 8px;
  overflow: hidden;
  border-radius: 8px;
  .channel-avatar {
    @include use-flex(center, center);
  }
  .group-type-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-top: 6px solid #86a9ff;
    border-left: 6px solid transparent;
    border-right: 6px solid #86a9ff;
    border-bottom: 6px solid transparent;
    z-index: 1;
  }
  .channel-info {
    height: 44px;
    padding-left: 10px;
    width: calc(100% - 40px);
    .channel-title {
      font-size: 15px;
      .status {
        font-size: 12px;
        color: var(--elp-text-color-secondary);
      }
    }
    .not-disturb {
      position: absolute;
      //bottom: -4px;
      right: 7px;
      color: #999999;
      z-index: 1;
    }
    .channel-message {
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--elp-color-info);
      .mention-message {
        color: var(--elp-color-danger);
      }
    }
  }
  .channel-remark {
    @include use-flex(flex-end, space-between, column);
    position: absolute;
    right: 0;
    height: 100%;
    font-size: 12px;
    padding: 10px 5px;
    text-align: right;
    color: var(--elp-text-color-secondary);
    background-color: var(--elp-bg-color);
    box-shadow: 5px 0 30px 20px var(--elp-bg-color);
  }
  &.active {
    background-color: var(--elp-color-primary-light-9);
    .channel-remark {
      background-color: var(--elp-color-primary-light-9);
      box-shadow: 5px 0 30px 20px var(--elp-color-primary-light-9);
    }
  }
}
</style>
